<script setup>
import { ref } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
const customerList = ref([
	{
		corp_name: '创新世界科技有限公司',
		mission_count: 1,
		mission_sended_count: 1,
		staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		staff_name: '张磊',
		success_count: 1,
		total_target_count: 1,
		failed_code: null,
		failed_reason: null,
		time: '2022-10-26 09:43'
	}
])
const remark = ref({
	address: '-',
	age: '-',
	birthday: '2022-10-28',
	description: '-',
	email: '-',
	phone_number: '-',
	position: '-',
	qq: '-',
	source_id: '-',
	enterprise: '-',
	weibo: '-'
})
const remarkName = ref({
	address: '地址',
	age: '年龄',
	birthday: '生日',
	description: '描述',
	email: '邮箱',
	phone_number: '电话',
	position: '职位',
	qq: 'QQ',
	source_id: '来源',
	enterprise: '企业',
	weibo: '微博'
})
const inputFocus = (text, key) => {
	if (text === '-') {
		remark.value[key] = ''
	}
}
const inputBlur = (text, key) => {
	if (text === '') {
		remark.value[key] = '-'
	}
}
</script>
<template>
	<div class="customer-detail-statistic">
		<div class="customer-info">
			<div class="staff-info">
				<div class="title">
					<el-icon class="icon-wrap"><UserFilled /></el-icon>添加客服信息
				</div>
				<el-table :data="customerList" border style="width: 80%">
					<el-table-column label="所属员工" width="180">
						<template #default="scope">
							<div class="user-wrap">
								<img :src="scope.row.staff_avatar" class="avatar" />
								<span class="user-name">{{ scope.row.staff_name }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="客户来源" width="180">
						<template #default="scope">
							<span>{{ scope.row.failed_code || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="time" label="添加时间" />
					<el-table-column label="最近沟通时间">
						<template #default="scope">
							<span>{{ scope.row.failed_code || '-' }}</span>
						</template>
					</el-table-column>
					<template #empty>
						<div class="table-empty">
							<img
								class="empty-img"
								src="../../../../../assets/img/img/list-empty.499dbb25961c.png"
							/>
							<p>暂无客服信息</p>
						</div>
					</template>
				</el-table>
				<div class="title" style="margin-top: 20px">
					<el-icon class="icon-wrap"><Flag /></el-icon>基本信息
					<el-divider style="width: 2px; margin: 0 12px" direction="vertical" />
					<span class="img-tip"> 所属员工可在「侧边栏-客户画像」中进行编辑</span>

					<el-tooltip effect="light" placement="bottom">
						<template #content>
							<img
								style="width: 300px"
								src="http://www.crmuu.com/customer-detail_tip.d0485f1553c7.png"
								alt=""
							/>
						</template>
						<MyIcon style="color: #7a7a7a; margin-left: 4px" name="Question" />
					</el-tooltip>
				</div>
				<div class="basic-info-table">
					<div class="item basic-item">
						<div class="label">性别</div>
						<div class="content">
							<p style="padding-left: 11px">男</p>
						</div>
					</div>
					<div v-for="(value, key) in remark" :key="key" class="item basic-item">
						<div class="label">{{ remarkName[key] }}</div>
						<div class="content" v-if="key === 'birthday'">
							<el-date-picker v-model="remark[key]" type="date" placeholder="请选择日期" />
						</div>
						<div class="content" v-else>
							<el-input
								class="input-no"
								v-model="remark[key]"
								style="width: 100%; height: 99%"
								placeholder="请输入"
								@focus="inputFocus(remark[key], key)"
								@blur="inputBlur(remark[key], key)"
							/>
						</div>
					</div>
				</div>
				<div class="title" style="margin-top: 20px">
					<el-icon class="icon-wrap"><EditPen /></el-icon>自定义信息
				</div>
				<el-divider style="width: 80%; margin: 0" />
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.table-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.customer-detail-statistic {
	display: flex;
	width: 100%;
	padding: 16px 24px;

	.customer-info {
		flex: 1;
		.staff-info {
			.user-wrap {
				display: flex;
				align-items: center;
				.avatar {
					width: 28px;
					height: 28px;
					margin-right: 6px;
					border-radius: 1px;
				}
				.user-name {
					-webkit-box-flex: 1;
					flex-grow: 1;
					width: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.title {
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				color: rgba(0, 0, 0, 0.85);
				font-size: 13px;
				font-weight: 700;
				.img-tip {
					font-size: 12px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
				.icon-wrap {
					margin-right: 8px;
					font-size: 16px;
					color: #7a7a7a;
				}
			}
		}
		.basic-info-table {
			display: flex;
			align-items: stretch;
			flex-wrap: wrap;
			width: 80%;
			padding: 1px 1px 0;
			font-size: 13px;
			background-color: #f0f0f0;
			:deep(.el-input__wrapper) {
				box-shadow: 0px 0px;
				border-radius: 0;
			}
			:deep(.el-input:hover) {
				border-bottom: 1px solid;
			}
			.item {
				display: flex;
				-webkit-box-align: stretch;
				align-items: stretch;

				width: 50%;
				padding: 0 1px 1px 0;
				background: #f0f0f0;
				.label {
					display: flex;
					-webkit-box-align: stretch;
					align-items: stretch;
					width: 30%;
					padding: 12px 16px;
					margin-right: 1px;
					background: #fbfbfb;
					color: rgba(0, 0, 0, 0.65);
				}

				.content {
					display: flex;
					-webkit-box-align: stretch;
					align-items: stretch;
					justify-content: center;
					flex-direction: column;
					position: relative;
					width: 70%;
					height: 48px;
					padding: 7px 16px;
					background: #fff;
					color: rgba(0, 0, 0, 0.85);

					.input-no {
						box-shadow: 0px 0px 0px;
					}
				}
			}
		}
	}
}
</style>
